<template>
	<view class="column-css">
		<view style="background-color: #FFFFFF;">
			<view class="row-css view-centen-text" style="margin: 0 30rpx;">
				<view class="row-css" style="width: 180rpx;align-items: center;">提现至</view>
				<div class="row-css" style="flex: 1; align-items: center;justify-content: space-between;">
					<!-- <view class="" v-for="(item, index) in banklist" :key="index"> -->
					<view class="">
						<view style="display: flex;">
							<view>
								<image style="width: 50rpx;height: 50rpx;padding-right: 20rpx;" mode="aspectFit" :src="bankIcon"></image>
							</view>
							<view style="text-align: center;" v-if="bankName">{{ bankName }}储蓄卡({{ accountNum.substring(accountNum.length - 4, accountNum.length) }})</view>
						</view>
					</view>
				<view>
					<view v-if="category != true" @click="onselet">
						<image style="width: 20rpx;height: 21rpx;padding-right: 10rpx;" mode="aspectFit" src="../../static/icon_carrier.png"></image>
					</view>
				</view>
				</div>
			</view>
			<view class="row-css view-centen-text" style="margin: 0 30rpx;">
				<view style="width: 180rpx;">提现金额</view>
				<div class="row-css" style="flex: 1; align-items: center;justify-content: space-between;">
					<view style="display: flex;flex: 1;"><input type="digit" style="font-size: 32rpx;" placeholder="请输入提现金额" v-model="amount" @input="oninput" /></view>
					<view style="font-size: 14px;">元</view>
				</div>
			</view>
		</view>
		<view class="row-css" style="justify-content: space-between;margin: 10rpx 30rpx;">
			<view v-if="isshow == true" class="row-css" style="font-size: 22rpx;color: #C8C7CC;align-items: center;">可转出{{ balance }}元</view>
			<view v-else class="row-css" style="font-size: 22rpx;color: #007AFF;align-items: center;" @click="showup()">可转出***元</view>
			<view style="color: #007AFF;size: 24rpx;" @click="onWithdrawall">全部提现</view>
		</view>
		<view class="row-css" style="width: 90%;margin: 80rpx 40rpx;">
			<button class="mini-btn" :style="{ background: category == 'true' ? '#FB8536' : '#007AFF' }" type="primary" size="default" @click="onwithdrawcode()">确认提现</button>
		</view>
		<!-- 验证码 -->
		<uni-popup ref="popup" type="bottom">
			<view class="column-css" style="background: #FFFFFF;width: 95%; padding: 20rpx; border-radius: 15rpx;">
				<view class="row-css pop-view-text" style="padding-top: 20rpx;">查询余额请输入验证码</view>
				<view class="row-css pop-view-text">验证码已发送您的手机</view>
				<view class="row-css pop-view-text">{{ userphone }}</view>
				<view style="padding: 20rpx;"><valid-code v-model="vacode" type="bottom" :maxlength="6" @finish="finish"></valid-code></view>
				<view style="color:#00BFFF; margin: 30rpx;font-size: 32rpx; display: flex; flex:1; justify-content: center;align-items: center;" @click="sendcode">
					{{ codeText }}
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" type="bottom">
			<view class="column-css" style="background: #FFFFFF;width: 600rpx;padding-bottom: 20rpx; border-radius: 15rpx;">
				<view style="padding: 20rpx;">选择账户</view>
				<view style="padding: 0 40rpx;max-height: 900rpx;overflow: auto;">
					<radio-group class="uni-list" @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in banklist" :key="index">
							<view>
								<view class="row-css" style="align-items: center;padding: 10rpx 0;justify-content: space-between;">
									<view class="row-css" style="justify-content: center;padding: 10rpx 0;">
										<image style="width: 50rpx;height: 50rpx;padding-right: 20rpx;" mode="aspectFit" :src="item.image"></image>
										<view style="text-align: center;">{{ item.bankName }}储蓄卡({{ item.bankNo.substring(item.bankNo.length - 4, item.bankNo.length) }})</view>
									</view>
									<radio :id="item.bankNo" :value="item.bankNo" :checked="item.checked"></radio>
								</view>
								<view class="line-veiw"></view>
							</view>
						</label>
					</radio-group>
					<view style="padding: 10rpx 0;margin: 5rpx 0; background: #FFFFFF;border-radius: 5rpx;" @click="onperfectie">
						<text style="margin: 0 15rpx;padding-right: 20rpx;">+</text>
						添加银行卡
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import validCode from '@/components/valid-code/valid-code.vue';
export default {
	components: {
		validCode
	},
	data() {
		return {
			amount: '',
			category: false,
			isshow: false,
			balance: '',
			otpOrderNo: '',
			businessNo: '',
			accountNum: '',
			bankIcon: '',
			bankName: '',
			payId: '',
			codeText: '重新获取验证码',
			banklist: [],
			iscode: 0,
			vacode: ''
		};
	},
	methods: {
		onselet() {
			this.$refs.popup1.open('center');
		},
		showup() {
			if(this.balance != ''){
				this.isshow = true
				this.amount = this.balance
				return
			}
			if (!this.isshow) {
					//见证宝
					this.wxRequest({
						url: `${this.API}/mini/jzb/queryBalanceCaptain`,
						method: 'POST',
						data: {
							payId: this.payId
						},
						title: '查询中...',
						success: res => {
							this.isshow = !this.isshow;
							let num = res.data.data.cashAmount - res.data.data.payFreeze
							this.balance = num;
							this.amount = res.data.data.cashAmount;
						}
					});
				// }
			} else {
				this.isshow = !this.isshow;
			}
		},
		// onselet() {
		// 	this.$refs.popup1.open('center');
		// },
		radioChange: function(evt) {
			for (let i = 0; i < this.banklist.length; i++) {
				if (this.banklist[i].bankNo === evt.detail.value) {
					this.accountNum = this.banklist[i].bankNo;
					this.bankIcon = this.banklist[i].image;
					this.bankName = this.banklist[i].bankName;
					this.$refs.popup1.close();
					break;
				}
			}
		},
		onperfectie: function(payId) {
			uni.navigateTo({
				url: `/pages/home/increase`
			});
			this.$refs.popup1.close();
		},
		userableBank: function() {
			this.wxRequest({
				url: `${this.API}/mini/jzb/queryBindBankCardCaptain`,
				method: 'POST',
				success: res => {
					this.banklist = res.data.data;
				}
			});
		},
		//确认提现
		onwithdrawcode() {
			if (this.amount <= 0) {
				uni.showToast({
					title: '金额填写错误！',
					duration: 2000,
					icon:'none'
				});
				return;
			}
			let withdrawdata = {
				category: this.category,
				payId: this.payId,
				amount: this.amount
			};
			let data = {
						bankName: this.bankName,
						bankNo: this.accountNum,
						cashAmount: this.amount
					}
				withdrawdata.bankName = this.bankName;
				withdrawdata.bankNo = this.accountNum;
				console.log(data)
				this.wxRequest({
					url: `${this.API}/mini/jzb/cashOutCaptain`,
					method: 'POST',
					data: {
						bankName: this.bankName,
						bankNo: this.accountNum,
						cashAmount: this.amount
					},
					title: '提现中...',
					success: res => {
						let accountNo = res.data.data.billNo;
						uni.navigateTo({
							url:'/pages/ship/index/mine'
						})
					}
				});
		},
		oninput(e) {
			this.$nextTick(() => {
				let val = e.target.value.toString();
				val = val.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
				val = val.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
				val = val.replace(/^0+\./g, '0.');
				val = val.match(/^0+[1-9]+/) ? (val = val.replace(/^0+/g, '')) : val;
				val = val.match(/^\d*(\.?\d{0,2})/g)[0] || '';
				this.amount = val;
			});
		},
		sendcode() {
			if (this.time == 60) {
				this.timer = setInterval(() => {
					this.codeText = `${this.time}s后重新获取验证码`;
					this.time--;
					if (this.time < 0) {
						this.time = 60;
						this.codeText = '重新获取验证码';
						clearInterval(this.timer);
					}
				}, 1000);
				// if (this.category) {
				// 	//二类户
				// 	this.wxRequest({
				// 		url: `${this.API}/mini/erLeiHu/getBalanceCode`,
				// 		method: 'POST',
				// 		data: {
				// 			payId: this.payId
				// 		},
				// 		title: '验证码发送中...',
				// 		success: res => {
				// 			this.otpOrderNo = res.data.data.otpOrderNo;
				// 			this.businessNo = res.data.data.businessNo;
				// 		}
				// 	});
				// } else {
				// 	//见证宝
				// }
			}
		},
		finish: function(e) {
			if (this.category) {
				//二类户
				if (this.iscode == 0) {
					this.wxRequest({
						url: `${this.API}/mini/jzb/queryBalanceCaptain`,
						method: 'POST',
						data: {
							payId: this.payId,
							otpOrderNo: this.otpOrderNo,
							otpValue: e,
							businessNo: this.businessNo
						},
						title: '余额查询中...',
						success: res => {
							this.isshow = !this.isshow;
							let num = (res.data.data.balance - res.data.data.payFreeze).toFixed(2)
							this.balance = num > 0 ? num : 0
							this.$refs.popup.close();
						},
						complete: res => {
							this.iscode = 0;
						}
					});
					this.iscode = 1;
				}
			} else {
				//见证宝
			}
		},
		onWithdrawall() {
			if(this.balance != ''){
				this.isshow = true
				this.amount = this.balance
				return
			}
			let that = this;
			if (!that.isshow) {
				uni.showModal({
					title: '提示',
					content: '是否查询余额?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.showup();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else {
				this.amount = this.balance;
			}
		}
	},
	onShow() {
		if (!this.category) {
			//见证宝
			// this.userableBank();
		}
		let userInfo = uni.getStorageSync(this.DATA_KEY.userInfo);
		this.wxRequest({
			url: `${this.API}/mini/jzb/getCashIdCardInfo?idCard=${userInfo.idcard}`,
			method: 'GET',
			title: '查询中...',
			success: res => {
				console.log(res)
				if (res.data.data && res.data.data.length > 0) {
					let list = res.data.data.map(item => {
						return {
							bankName: item.bankName,
							bankNo: item.cashCard,
							image: item.image
						}
					})
					this.banklist = list;
					this.accountNum = res.data.data[0].cashCard;
					this.bankIcon = res.data.data[0].image;
					this.bankName = res.data.data[0].bankName;
				}
			}
		});
	},
	onLoad: function(options) {
		console.log(options,"00000...000")
		this.amount =options.num
		// let datapurse = JSON.parse(options.datapurse);
		// console.log(datapurse,"88888888888")
		// this.category = datapurse.category;
		// this.isshow = datapurse.isshow;
		// this.balance = datapurse.balance;
		// this.payId = datapurse.payId;
		// if (this.category) {
		// 	//二类户
		// 	this.wxRequest({
		// 		url: `${this.API}/mini/erLeiHu/getBankInfo`,
		// 		method: 'POST',
		// 		data: {
		// 			payId: this.payId
		// 		},
		// 		title: '查询中...',
		// 		success: res => {
		// 			this.accountNum = res.data.data.accountNum;
		// 			this.bankIcon = res.data.data.bankIcon;
		// 			this.bankName = res.data.data.bankName;
		// 		}
		// 	});
		// } else {
			//见证宝
			// this.wxRequest({
			// 	url: `${this.API}/mini/jzb/queryBindBankCardCaptain`,
			// 	method: 'POST',
			// 	title: '查询中...',
			// 	success: res => {
			// 		console.log(res.data.data[0],111111111111)
			// 		this.accountNum = res.data.data[0].bankNo;
			// 		this.bankIcon = res.data.data[0].image;
			// 		this.bankName = res.data.data[0].bankName;
			// 	}
			// });
		// }
	}
};
</script>

<style>
page {
	/* background: #ffffff; */
	font-size: 30rpx;
}

.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}
.view-centen-text {
	border-bottom: 1rpx solid #f1f1f1;
	padding: 40rpx 10rpx;
	flex: 1;
}
.mini-btn {
	width: 100%;
	background: #e04b28;
	font-size: 28rpx;
	padding: 10rpx 0;
	margin: 0 20rpx;
}
.pop-view-text {
	padding-top: 20rpx;
	justify-content: center;
	font-size: 32rpx;
	color: #575858;
	text-align: center;
}
.line-veiw {
	height: 5rpx;
	width: 100%;
	background: #f2f2f2;
}
</style>
